<template>
  <div class="equip">
      <div v-transfer-dom>
        <alert v-model="show1" title="错误提示！">请选择借领时间！</alert>
        <alert v-model="show2" title="错误提示！">请选择归还时间！</alert>
        <alert v-model="show3" title="错误提示！">请添填写用途！</alert>
        <alert v-model="show4" title="错误提示！">请添加设备！</alert>
        <alert v-model="show5" title="警告！">归还时间必须大于借领时间！</alert>
        <alert v-model="show6" title="警告！">设备数量必须为数字！</alert>
        <alert v-model="show7" title="警告！">设备数量不能为空！</alert>
    </div>
    <view-box>
      <group title="设备申请">
          <datetime placeholder="请选择日期" v-model="info.startTime" format='YYYY-MM-DD HH:mm:00' title="开始时间："></datetime>
          <datetime placeholder="请选择日期" v-model="info.endTime" format='YYYY-MM-DD HH:mm:00' title="结束时间："></datetime>
        <x-textarea  title="用途：" :max="300"  v-model="info.purpose"></x-textarea>
        <!-- <cell title="继续添加" @click.native="add" is-link></cell> -->
      </group>
      <!-- {{equipList}} -->
      <group title="已选设备">
      </group>
      <div class="list"  v-for='(item, index) in equiplist'  :key="index">
        <div @click="ChoseClick(index)" class="checkicon icon-span-select"></div>
        <div class="list-name">{{item.name}}</div>
        <div class="list-model" >{{item.model}}</div>
        <div class="list-count" >库存: {{item.count}}</div>
        <x-number class="select-num" :min="1" width="30px" :max="item.count" v-model='nums[index]'></x-number>
      </div>
      <div class="nextButton">
        <span style="font-size:16px;line-height:3em;margin-left:10%;">已选择<b><i style="color:#1AAD19;">{{equiplist.length}}</i></b> 种设备</span>
        <x-button style="float:right;margin:5px 10px;width: 30%;height:inherit;" @click.native="Submitequip" type="primary">申请借用</x-button>
      </div>
        <!-- <x-button style="margin-top:10px;float:left" size="mini" @click.native="add">返回继续添加</x-button> -->
    </view-box>
  </div>
</template>
<script>
import {Group, Alert, XButton, XNumber, Box, Cell, ViewBox, XInput, Datetime, CheckIcon, XTable, XTextarea, Checklist, Tab, TabItem, Sticky, XDialog, XSwitch, TransferDomDirective as TransferDom, Checker, CheckerItem} from 'vux'
import { mapState } from 'vuex'

export default {
  directives: {
    TransferDom
  },
  components: {
    Datetime,
    Group,
    XNumber,
    Box,
    ViewBox,
    Cell,
    XInput,
    XTable,
    XTextarea,
    Tab,
    TabItem,
    Alert,
    CheckIcon,
    Checklist,
    XButton,
    Sticky,
    XDialog,
    XSwitch,
    Checker,
    CheckerItem
  },
  props: [''],
  data () {
    return {
      nums: [],
      equiplist: [],
      info: {
        devices: [],
        startTime: '',
        endTime: '',
        purpose: ''
      },
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false
    }
  },
  methods: {
    ChoseClick (index) {
      this.$store.dispatch('splice', index)
    },
    add () {
      this.$store.dispatch('svaeParams', false)
    },
    removeequip (index) {
      this.equiplist.splice(index, 1)
      // this.$store.dispatch('splice', index)
    },
    Submitequip () {
      var b = false
      for (var i1 = 0; i1 < this.equiplist.length; i1++) {
        if (this.nums[i1] === '') {
          b = true
          break
        }
      }
      var a1 = (new Date(this.info.startTime) - new Date(this.info.endTime)) / (1440 * 60000)
      if (this.info.startTime === '') {
        this.show1 = true
      } else if (this.info.endTime === '') {
        this.show2 = true
      } else if (b) {
        this.show7 = true
      } else if (this.info.purpose === '') {
        this.show3 = true
      } else if (a1 > 0) {
        this.show5 = true
      } else {
        if (this.nums.length === 0) {
          this.show4 = true
        } else {
          for (let i = 0; i < this.equiplist.length; i++) {
            let temp = {
              count: this.nums[i],
              deviceId: this.equiplist[i].id
            }
            this.info.devices.push(temp)
          }
          console.log(this.info)
          this.$http.post('/api/items/deviceApply', this.info).then((res) => {
            if (res.data.code === 0) {
              this.info = {
                devices: [],
                startTime: '',
                endTime: '',
                purpose: ''
              }
              this.$store.dispatch('svaeParams', false)
              this.$store.dispatch('setlist', [])
              this.$router.push('/')
            } else {
              alert('添加失败，请查找原因')
            }
          })
        }
      }
    }
  },
  mounted () {
    this.$http.get('/api/items/device/allowMe?selectedDeviceIds=' + this.$route.query.selectedDeviceIds).then((res) => {
      console.log('返回值', res)

      this.equiplist = res.data.content.records
    })

    this.nums = this.$store.state.vux.nums
    console.log(this.nums)
    console.log('路由', this.$route.query.selectedDeviceIds)
  },
  computed: {
    ...mapState({
      // equiplist: state => state.vux.equiplist,
      islist: state => state.vux.islist
    })
  }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/close';
.addcolor{
  background-color: #ededed;
}
.equip {
  padding-bottom: 60px;
  padding-top: 40px;
}
.weui-dialog {
  position: fixed;
  z-index: 5000;
  width: 100%;
}
.dialog-demo {
  .dialog-title {
    line-height: 30px;
    color: #222;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 10px;
    max-width: 500px;
  }
  .demo1-item-selected {
    border: 1px solid green;
  }
}

.list > .weui-cell:before{
  border: none;
}
.list > .weui-cell{
  width: 45%;
  float: right;
  position: relative;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}
.list{
  background: #fff;
  margin-top: 5px; 
  // padding: 5px 0 0 0;
  float: left;
  height:70px;
  width: 100%;
}
.checkicon{
  float: left;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #ccc;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 7% 5%;
  vertical-align: middle;
}
.checkicon::after{
  border: 2px solid transparent;
  border-left: 0;
  border-top: 0;
  content: " ";
  top: 3px;
  left: 6px;
  position: absolute;
  width: 4px;
  height: 8px;
  -webkit-transform: rotate(45deg) scale(0);
  transform: rotate(45deg) scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.icon-span-select{
  background-color: #1AAD19;
  border-color: #1AAD19;
}
.icon-span-select::after{
  border-color: #fff;
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
}

.nextButton{
  width: 100%;
  // height: 60px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  float: left;
  border-top: 1px solid #ddd;
  z-index: 9999;
}
.list-name {
    width: 250px;
    font-size: 18px;
    margin-top: 5px;
    float: left;
}

.list-model {
    width: 200px;
    top: 40px;
    color: rgb(170, 170, 170);
    left: 50px;
    margin-top: 5px;
    font-size: 14px;
    float: left;
    left: 50px;
}

.list-count {
    top: -25px;
    float: right;
    left: -10px;
    color: #aaa;
    margin: 0 20px;
    position: relative
}

.select-num {
    float: right;
    top: -36px;
    position: relative;
}
</style>
